<template>
  <!-- 文件类型是图片 -->
  <ImageMessage :msg-info="msgInfo" v-if="isImage(fileName)" />
  <!-- 文件类型是图片 -->
  <VideoMessage v-else-if="isVideo(fileName)" :msg-info="msgInfo" />
  <div v-else class="message-content message-content-file" @click.stop="preview(msgInfo.messageContent)">
    <img class="file-img" :src="getAssetsFile(judgedFileType(fileName))" />
    <div>
      <p class="file-name">
        {{ fileName }}
      </p>
      <span style="color: #8c8c8c"
      >{{ readablizeBytes(fileSize) }}
        <a @click.stop="download(url, fileName)">{{$t('common.base.clickToDownload')}}</a>
      </span>
    </div>
  </div>
</template>

<script>
/** vue */
import ChatMixin from '@src/modules/im/ChatMixin/index.js';
import ImageMessage from '@src/modules/system/frame/component/InternalCoordination/chat/components/chattingRecords/ImageMessage';
import VideoMessage from '@src/modules/system/frame/component/InternalCoordination/chat/components/chattingRecords/VideoMessage';

/** util */
import { isImage, isVideo } from '@src/modules/im/imChat/utils/tools.js';
import { getOssUrl } from '@src/util/assets'
const audio = getOssUrl('/im/audio.png')
const doc = getOssUrl('/im/doc.png')
const file = getOssUrl('/im/file.png')
const image = getOssUrl('/im/image.png')
const pdf = getOssUrl('/im/pdf.png')
const ppt = getOssUrl('/im/ppt.png')
const txt = getOssUrl('/im/txt.png')
const xls = getOssUrl('/im/xls.png')

const fileTypeImg = {
  audio,
  doc,
  file,
  image,
  pdf,
  ppt,
  txt,
  xls,
}

export default {
  name: 'file-message',
  components: {
    ImageMessage,
    VideoMessage,
  },
  mixins: [ChatMixin],
  props: {
    msgInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      previewFile: {},
    };
  },
  computed: {
    fileName() {
      return this.msgInfo.messageContent.fileName;
    },
    url() {
      return this.msgInfo.messageContent.url;
    },
    fileSize() {
      return this.msgInfo.messageContent.fileSize;
    },
  },
  methods: {
    isImage,
    isVideo,
    getAssetsFile(fileName) {
      return fileTypeImg[fileName.replace('.png', '')];
    },
    preview(item) {
      const {fileName, fileSize, url, fileId = ''} = item
      const fileType = this.judgedFileType(fileName).split('.')[0];
      let previewFile = {
        id:fileId,
        url,
        fileSize:this.readablizeBytes(fileSize),
        fileName,
        name: fileName,
        downloadUrl:`/files/download?fileId=${fileId}`,
        fileType
      }
      // 微信端发送的文件格式与app附件有差异，主要体现在文件url格式上
      if (fileType == 'image' || item.type == 'image') {
        this.$previewElementImg(previewFile.url, [previewFile]);
      } else if (fileType == 'pdf') {
        this.$previewPDF(previewFile.url, previewFile);
      } else if (fileType == 'video' || item.type == 'video') {
        this.$previewVideo(previewFile.url, previewFile);
      } else if (fileType === 'audio' || item.type === 'vioce') {
        this.$previewVideo(previewFile.url, previewFile);
      }
    },
  },
};
</script>

<style scoped lang='scss'>
.message-content-file{
  display: flex;
  max-width: 80%;
  padding: 10px;
  border: 1px solid #e8e8e8 !important;
  font-size: 12px;
  margin-left: 8px;
  margin-right: 8px;
  border-radius: 8px 8px 8px 0px;
  background-color: #ffffff !important;
  .file-name {
    font-size: 14px;
    font-weight: bold;
    word-break:break-all;
  }
  .file-img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 4px;
  }
  p {
    margin-bottom: 4px;
  }
  a {
    color: $color-primary-light-6 !important;
    cursor: pointer;
  }
}
</style>